<template>
  <el-dialog
    v-model="props.show"
    :title="dialog.title"
    width="600"
    @close="diglogClose()"
  >
    <el-form
      :key="props.show"
      ref="RefForm"
      :model="dialog.data"
      label-width="120"
      class="w-100%"
      :rules="rules"
    >
      <el-form-item label="规章名称">
        {{ props.data.name }}
      </el-form-item>
      <el-form-item label="上传版本文件" prop="fileId">
        <el-upload
          ref="upload"
          v-model:file-list="fileList"
          action="/dev-api/api/app/file/upload-file"
          :on-success="handleSuccess"
          :on-remove="handleRemove"
          :on-exceed="handleExceed"
          :limit="1"
          class="w-200px"
        >
          <el-button type="primary">
            <el-icon><Upload /></el-icon>
            上传
          </el-button>
        </el-upload>
        <el-input class="hidden" v-model="dialog.data.fileId"></el-input>
      </el-form-item>
      <el-form-item label="发布日期" prop="publishTime">
        <el-date-picker v-model="dialog.data.publishTime" type="date" class="w-200px!" />
      </el-form-item>
      <el-form-item>
        <el-checkbox
          v-model="dialog.data.isFollowQuestions"
          label="将上一版本关联的题目更改至新的版本"
        />
      </el-form-item>
    </el-form>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="diglogClose()">取消</el-button>
        <el-button type="primary" @click="confirm" :loading="loading"> 确认 </el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script setup lang="ts">
import { useRoute, useRouter } from "vue-router";
import { ApiPostRegulationUpgrade } from "@/api/resource-management/regulations";
import { Search } from "@element-plus/icons-vue";
import organizeQuestionBanks from "@/components/organizeQuestionBanks/index.vue";
import type {
  UploadRawFile,
  UploadRequestOptions,
  UploadUserFile,
  UploadFile,
  UploadProps,
  UploadInstance,
  FormInstance,
  FormRules,
} from "element-plus";
import { genFileId, dayjs } from "element-plus";

const route = useRoute();
const router = useRouter();
const loading = ref(false);

const { params, query } = route;
const { path } = params;

const props = defineProps({
  show: {
    type: Boolean,
    default: false,
  },
  data: {
    type: Object,
    default: {},
  },
});

const emits = defineEmits(["close", "acQuestionData"]);
watch(props.show, (newVal, oldVal) => {
  console.log(newVal);
});

const dialog = reactive({
  // show: true,
  title: "发布新版",
  data: {
    fileId: "",
    publishTime: "",
    isFollowQuestions: true,
  },
});

const RefForm = ref(null);
const rules = reactive({
  fileId: [{ required: true, message: "规章文件必填", trigger: "change" }],
  publishTime: [{ required: true, message: "发布日期必填", trigger: "change" }],
});

const upload = ref<UploadInstance>();
const handleExceed: UploadProps["onExceed"] = (files) => {
  upload.value!.clearFiles();
  const file = files[0] as UploadRawFile;
  file.uid = genFileId();
  upload.value!.handleStart(file);
  upload.value!.submit();
};
// 上传成功
const handleSuccess = (res) => {
  if (res.code == 200) {
    dialog.data.fileId = res.data.id;
  }
};
const handleRemove = () => {
  dialog.data.fileId = "";
};

const confirm = () => {
  RefForm.value.validate((valid, fields) => {
    if (valid) {
      loading.value = true;
      ApiPostRegulationUpgrade({ ...props.data, ...dialog.data })
        .then((res) => {
          if (res.code == 200) {
            ElMessage({
              message: "发布成功！",
              type: "success",
            });
            diglogClose(true);
          }
        })
        .finally(() => {
          loading.value = false;
        });
    }
  });
};

const diglogClose = (reload: Boolean = false) => {
  emits("close", false, reload);
};
</script>

<style scope lang="scss"></style>
